<template>
    <div class="menu">
        <div class="con">
            <div class="search">
                <div
                    v-if="$route && !(logoShow.indexOf($route.path) != -1)"
                    class="logo"
                    :style="{ width: logoWidth }"
                >
                    <template v-if="$route.path == '/service/demandlist'"
                        >需求大厅</template
                    >
                    <template v-if="$route.path == '/service/servicelist'"
                        >找服务商</template
                    >
                </div>
                <el-input
                    placeholder="代理记账"
                    v-model="input3"
                    class="search-1"
                >
                    <div class="search-1-left" slot="prepend">服务</div>
                    <el-button
                        class="search-1-right"
                        slot="append"
                        icon="el-icon-search"
                        @click="goSearch()"
                        >搜索</el-button
                    >
                </el-input>
                <span class="huo">或</span>
                <el-button class="fbxq-button" @click="goPostDemand()"
                    >发布需求</el-button
                >
            </div>
            <div
                v-show="$route && $route.path == '/service'"
                class="everyone-search"
            >
                <img src="~/assets/images/service/yb-img/manyFire.png" alt="" />
                <span class="djdzs">大家在搜:</span>
                <span
                    class="many-tag"
                    v-for="item in serviceHotSearch"
                    :key="item"
                    @click="goSearch2(item)"
                    >{{ item }}</span
                >
            </div>
            <div class="service-menu">
                <div class="index" v-show="$route && $route.path == '/service'">
                    热门服务分类
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div
                    class="menu-list"
                    :style="{
                        paddingLeft:
                            $route && $route.path == '/service' ? '45px' : '0',
                    }"
                >
                    <div
                        v-show="$route && $route.path != '/service'"
                        class="menu-item"
                        @click="go('/service')"
                    >
                        首页
                    </div>

                    <div
                        class="menu-item weight600"
                        :class="{
                            'menu-item-active': isRouteActive(
                                'service-servicelist'
                            ),
                        }"
                        @click="go('/service/servicelist')"
                    >
                        找服务商<img
                            src="~/assets/images/service/yb-img/categoryFire.png"
                            alt=""
                        />
                        <div class="line"></div>
                    </div>
                    <div
                        class="menu-item weight600"
                        :class="{
                            'menu-item-active':
                                isRouteActive('service-demandlist'),
                        }"
                        @click="go('/service/demandlist')"
                    >
                        需求大厅
                        <img
                            src="~/assets/images/service/yb-img/categoryFire.png"
                            alt=""
                        />
                        <div class="line"></div>
                    </div>
                    <div class="menu-item" @click="userGo('/user/mydemand')">
                        我的需求
                        <div class="line"></div>
                    </div>
                    <div
                        class="menu-item"
                        @click="userGo('/user/myserviceorder')"
                    >
                        企服订单
                        <div class="line"></div>
                    </div>
                    <div
                        v-if="userInfo && userInfo.is_server == 1"
                        class="menu-item"
                        @click="go('/service/servicecenter/index')"
                    >
                        商家中心
                        <div class="line"></div>
                    </div>
                    <div
                        v-if="userInfo && userInfo.is_server != 1"
                        class="menu-item"
                        :class="{
                            'menu-item-active': isRouteActive(
                                'service-applyservice'
                            ),
                        }"
                        @click="go('/service/applyservice')"
                    >
                        成为服务商
                        <div class="line"></div>
                    </div>
                    <div
                        v-if="userInfo && userInfo.is_server != 1"
                        class="menu-item"
                        :class="{
                            'menu-item-active': isRouteActive(
                                'service-applypersonservice'
                            ),
                        }"
                        @click="go('/service/applypersonservice')"
                    >
                        成为个人服务商
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "serviceMenu",
    props: {},
    data() {
        return {
            logoShow: ["/service/applyservice", "/service", "/service"],
            input3: "",
            path: "",
            isRouteActive: function (name) {
                if (this.$route.name == name) return true;
                return false;
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        ...mapState("service", {
            serviceHotSearch: (state) => state.serviceHotSearch,
        }),
        logoWidth: function () {
            if (
                this.$route.name == "service-servicesearch" ||
                this.$route.name == "service-demanddetail" ||
                this.$route.name == "service-servicedetail" ||
                this.$route.name == "service-serviceshopsdetail"
            ) {
                return "0px";
            } else {
                return "290px";
            }
        },
    },
    watch: {},
    created() {},
    mounted() {
        if (this.$route.query && this.$route.query.keyword) {
            this.input3 = this.$route.query.keyword;
        }
    },
    methods: {
        go(path) {
            if (
                path == "/service/servicecenter/Index" &&
                !this.userInfo.service_info
            ) {
                this.$message({
                    message: "请先成为服务商",
                    type: "warning",
                });
                return;
            }
            this.$router.push({
                path: path,
            });
        },

        //去搜索页
        goSearch() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            console.log("去搜索");
            // this.$router.replace({
            //   path: "/servicesearch",
            //   query: { keyword: this.input3 },
            // });

            let routeData = this.$router.resolve({
                path: "/service/servicesearch",
                query: { keyword: this.input3 },
            });
            window.open(routeData.href, "_blank");
        },
        userGo(path) {
            if (!this.userInfo) {
                this.$message({
                    message: "请先登录",
                    type: "warning",
                });
                return;
            }
            let routeData = this.$router.resolve({
                path: path,
            });
            window.open(routeData.href, "_blank");
        },

        goSearch2(keyword) {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            this.$router.push({
                path: "/service/servicesearch",
                query: {
                    keyword: keyword,
                },
            });
        },

        goPostDemand() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            this.$router.push({
                path: "/service/postdemand",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.menu {
    background-color: #fff;
}
.con {
    width: 1200px;
    margin: 0 auto;
    // height: 200px;
    position: relative;
}
.search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 46px;

    .logo {
        // margin-right: 94px;
        font-size: 36px;
        font-weight: 500;
        color: #1c87f3;
    }

    .huo {
        padding: 0 28px;
    }

    .search-1 {
        width: 100%;
        height: 48px;
        line-height: 48px;
        border-radius: 0;
        border: 2px solid #1c87f3;
        .search-1-left {
            font-size: 14px;
            color: #333333;
        }
        .search-1-right {
            background: #1c87f3;
            font-size: 14px;
            color: #ffffff;
            height: 50px;
            border-width: 0;
            margin: 0;
            border-radius: 0;
        }
    }
    &::v-deep .el-input__inner {
        border-width: 0;
        height: 50px;
    }
    &::v-deep .el-input-group__append {
        background: transparent !important;
        border-width: 0 !important;
        padding: 0;
    }
    &::v-deep .el-input-group__prepend {
        background: transparent !important;
        border-left-width: 0 !important;
        border-top-width: 0 !important;
        border-bottom-width: 0 !important;
        border-right: 1px solid #d8d8d8;
    }

    .fbxq-button {
        font-size: 14px;
        color: #ffffff;
        width: 160px;
        height: 50px;
        background: #ff6900;
        border-radius: 0;
        border: none;
    }
}

.everyone-search {
    display: flex;
    align-content: center;
    margin-top: 16px;
    height: 17px;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    img {
        width: 14px;
        height: 16px;
    }
    .many-tag {
        cursor: pointer;
        padding: 0 6px;
    }
    .many-tag:hover {
        color: #1c87f3;
    }
}

.service-menu {
    // position: absolute;
    // bottom: 0;
    // left: 0;
    display: flex;
    padding-top: 28px;
    .index {
        box-sizing: border-box;
        width: 230px;
        height: 45px;
        line-height: 45px;
        background: #1c87f3;
        font-size: 14px;
        color: #ffffff;
        padding-left: 20px;
        i {
            padding-left: 96px;
        }
    }
    .menu-list {
        display: flex;
        align-items: center;
        .menu-item {
            font-size: 16px;
            color: #333333;
            height: 45px;
            line-height: 35px;
            margin-right: 46px;
            cursor: pointer;
            position: relative;
            &:hover {
                color: #ff6900;
            }
            img {
                position: absolute;
                top: 2px;
                width: 14px;
                height: 14px;
            }
            .line {
                display: block;
                width: 0;
                height: 3px;
                background: #ff6900;
                border-radius: 3px;
                margin: 0 auto;
                transition: width 0.3s;
            }
        }
        .menu-item-active {
            color: #ff6900;
            .line {
                width: 27px;
            }
        }
    }
}

.djdzs {
    margin-left: 6px;
}

.weight600 {
    font-weight: 600;
}
</style>
